<template>
    <n-tooltip :width="twidth">
        <template #trigger>
            <n-button  :strong="strong" v-bind="$attrs" :secondary="secondary" :circle="circle" :type="type" @click="onClick">
                <template #icon v-if="icon">
									<svg-icon v-if="localIcon" :local-icon="icon!" />
									<svg-icon v-else :icon="icon!" />
                </template>
            </n-button>
        </template>
        {{str}}
    </n-tooltip>
</template>

<script  setup lang='ts' >
    import { Type } from "naive-ui/es/button/src/interface"
    defineOptions({ name: 'TooltipBtn' });

    type Props = {
        strong?:boolean,secondary?:boolean,circle?:boolean,type?:Type,icon?:string
        str:string,onClick?:((e: MouseEvent) => any),twidth?:number|'trigger',localIcon?:boolean,
    };
    const props = withDefaults(defineProps<Props>(),{
       strong:true,secondary:true,circle:true,type:'primary',icon:"ri-edit-box-line" ,twidth:60,localIcon:true
    })

    const { strong,secondary,circle,type,str,onClick } = props ;
</script>

<style lang='scss' scoped>
</style>
